<ot-section-title>Events</ot-section-title>
<div class="alert alert-warning" ng-if="eventsLoaded && events.length == 0">
    No event.
</div>
<div class="alert alert-info" ng-if="!eventsLoaded" ng-hide="loadingEvents">
    <a ng-click="moreEvents()" class="ot-action">Load the events</a>
</div>
<div class="alert alert-info" ng-show="loadingEvents">
    <span class="ot-loading-indicator"></span>
    Loading the events...
</div>
<div class="ot-event" ng-repeat="event in events">
    <span class="ot-event-category">
        <span ng-if="event.entities.PROMOTION_LEVEL">
            <ot-entity-image entity="event.entities.PROMOTION_LEVEL" link="#/promotionLevel/{{event.entities.PROMOTION_LEVEL.id}}"></ot-entity-image>
        </span>
        <span ng-if="event.entities.VALIDATION_STAMP">
            <ot-entity-image entity="event.entities.VALIDATION_STAMP" link="#/validationStamp/{{event.entities.VALIDATION_STAMP.id}}"></ot-entity-image>
        </span>
    </span>
    <span class="ot-event-status">
        <span ng-if="event.values.status">
            <img class="ot-icon" ng-src="assets/validation-run-status/{{event.values.status.name}}.png"/>
        </span>
    </span>
    <span class="ot-event-property">
        <span ng-if="event.data.property">
            <img class="ot-icon" ng-src="extension/{{event.data.property.feature.id}}/property/{{event.data.property.typeName}}.png"/>
        </span>
    </span>
    <span class="ot-event-message" ng-bind-html="renderEvent(event)"></span>
    <span class="ot-event-signature">
        {{event.signature.user.name}}
        <span title="{{event.signature.time | date:'mediumDate'}} {{event.signature.time | date:'mediumTime'}}">{{renderSince(event.signature.time)}}</span>
    </span>
</div>
<div>
    <button class="btn btn-link pull-right" ng-show="more" ng-click="moreEvents()">More...</button>
</div>